<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>test</title>  
  
    <style>  
        * {margin: 0; padding: 0;}  
        body {  
            width: 100%;  
            height: 100%;  
        }  
    </style>  
</head>  
<body>  
    <div id="a">a</div>  
    <div class="b">b</div>  
    <div class="c">  
        <div class="d">  
            <span>  
                <a data="123"></a>  
                <a data="456"></a>  
                <a data="abc"></a>  
                <a data="a b"></a>  
                <a data="a b c"></a> 
                <p data>ccc</p>  
                <p>ddd</p>  
            </span>  
        </div>  
        <div class="e">eee</div>  
    </div>  
  
  
    <script>  
    window.onload = function() {  
        var a = document.querySelector('#a'),  
            b = document.querySelector('.b');  
  
        console.log(a);//<div id="a">a</div>  
        console.log(b);//<div class="b">b</div>  
  
        var c1 = document.querySelector('.c span p');//默认选取第一个  
        var c2 = document.querySelectorAll('.c span p');//选取的是一个数组  
        var c3 = document.querySelectorAll('.c span p:first-child');//选取的是一个数组  
        var c4 = document.querySelectorAll('.c *');//选取.c所有子级  
        var c5 = document.querySelectorAll('.c, p');//选取.c和所有p元素  
        var c6 = document.querySelectorAll('a+p');//选取a后面紧邻的p  
        var c7 = document.querySelectorAll('[data]');//选取带有data属性的元素  
        var c8 = document.querySelectorAll('[data~=a]');//选取data属性包含a这一项的元素  
        var c9 = document.querySelectorAll('.c div:first-child');//选取.c的第一个子级div
        var c10 = document.querySelectorAll('p:not([data])');//选取.c的第一个子级div  
        var c11 = document.querySelectorAll('span a:nth-child(2n)');//选取.c的第一个子级div  
  
        console.log(c1);  
        console.log(c2);  
        console.log(c3);  
        console.log(c4);  
        console.log(c5);  
        console.log(c6);  
        console.log(c7);  
        console.log(c8);  
        console.log(c9);  
        console.log(c10);  
        console.log(c11);  
    }  
    </script>  
</body>  
</html>